<template>
  <el-aside width="200px">
    <el-menu default-active="1" class="sidebar-menu" @select="handleMenuSelect">
      <el-menu-item index="1">首 页</el-menu-item>
      <el-menu-item index="2">个人账单</el-menu-item>
      <el-menu-item index="3">个人信息</el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
  // 定义组件事件，用于向父组件传递菜单选择事件
  const emit = defineEmits(['menu-select'])

  // 菜单选择处理函数，触发时向父组件传递选中索引
  const handleMenuSelect = (index) => {
    // 触发自定义事件并将选中索引传递给父组件
    emit('menu-select', index)
  }
</script>

<style scoped>
  .sidebar-menu {
    height: 100%;
  }

  /* 让侧边栏菜单项文字居中对齐 */
  .sidebar-menu .el-menu-item {
    justify-content: center;
    font-size: medium;
  }
</style>
